@keyframes right-in-ani {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    20%{
        opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes left-in-ani {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    20%{
        opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes top-in-ani {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    20%{
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes bottom-in-ani {
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
    20%{
        opacity: 0;
        transform: translateY(100%);
    }
}
@keyframes txt-ani {
    0%{
        opacity: 0;
        letter-spacing: 20px;
    }
    20%{
        opacity: 0;
        letter-spacing: 20px;
    }
}
@keyframes appear-ani {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
}